<template>
    <div
        class="cardAuthorizationTransaction"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 卡片授权交易查询 -->
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <!-- <span>查询服务类-卡片授权交易查询 (账户类别->{{DicvPBFLAGValue}})</span> -->
                <span>查询服务类-卡片授权交易查询</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <div class="cardAuthorizationTransactionMain">
                    <el-form
                        ref="formData"
                        :model="formDatas"
                        :rules="rules"
                        :inline="true"
                        label-position="right"
                        size="small"
                        label-width="120px"
                    >
                        <el-row>
                            <el-form-item label="账户类别:" class="text_fl">
                                <el-select
                                    v-model="formDatas.accttype"
                                    placeholder="请选择账户类别"
                                    clearable
                                    @change="changeCardList"
                                >
                                    <el-option
                                        v-for="item in AccountionTYPE_INFO"
                                        :label="item.label"
                                        :value="item.code"
                                        :key="item.label"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="卡号:">
                                <el-select v-model="formDatas.CARDNBR" placeholder="请选择卡号">
                                    <el-option
                                        v-for="item in CardnbrList"
                                        :label="item.CARDNBR"
                                        :value="item.CARDNBR"
                                        :key="item.CARDNBR"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="起始日期:">
                                <el-date-picker
                                    v-model="formDatas.BEGDATE"
                                    value-format="yyyyMMdd"
                                    format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="起始日期"
                                    :picker-options="startOptions"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束日期:">
                                <el-date-picker
                                    v-model="formDatas.ENDDATE"
                                    value-format="yyyyMMdd"
                                    format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="结束日期"
                                    :picker-options="endtOptions"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <div class="btn_Box">
                                    <el-button
                                        type="primary"
                                        size="small"
                                        icon="el-icon-search"
                                        @click="onSubmit"
                                    >查询</el-button>
                                    <el-button
                                        type="primary"
                                        size="small"
                                        icon="el-icon-refresh-right"
                                        @click="handleReset"
                                    >重置</el-button>
                                </div>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div v-show="ifquery">
                <el-table
                    :data="ImpowerList1"
                    border
                    stripe
                    style="width: 99%"
                    class="heard-bg business_table"
                >
                    <!-- <el-table-column  width="50" label="选项">
                        <template slot-scope="scope">
                            <el-radio v-model="dealId" :label="scope.row">{{ }}</el-radio>
                        </template>
                    </el-table-column>-->
                    <el-table-column label="时间" width="100">
                        <template
                            slot-scope="scope"
                        >{{scope.row.AUTHDATE | isDataShow(scope.row.AUTHTIME)}}</template>
                    </el-table-column>
                    <el-table-column label="金额">
                        <template slot-scope="scope">{{scope.row.AUTHAMT|formatAmt}}</template>
                    </el-table-column>
                    <el-table-column label="授权号码">
                        <template slot-scope="scope">{{scope.row.AUTHCODE}}</template>
                    </el-table-column>
                    <!-- <el-table-column  label="商户类型"> <template slot-scope="scope">{{scope.row.MERCHTYPE}} </template> </el-table-column> -->
                    <el-table-column label="商户名称">
                        <template slot-scope="scope">{{scope.row.CARDNAME}}</template>
                    </el-table-column>
                    <el-table-column label="响应信息">
                        <template slot-scope="scope">{{scope.row.MESSAGE}}</template>
                    </el-table-column>
                    <el-table-column label="交易描述">
                        <template slot-scope="scope">{{scope.row.TRANDESP}}</template>
                    </el-table-column>
                    <el-table-column label="原始金额">
                        <template slot-scope="scope">{{scope.row.ORIAMT|formatAmt}}</template>
                    </el-table-column>
                    <el-table-column label="原始币种">
                        <template slot-scope="scope">{{scope.row.ORICURR| filterCURR(currencyList)}}</template>
                    </el-table-column>
                    <el-table-column label="汇率">
                        <template slot-scope="scope">{{scope.row.CONVRATE}}</template>
                    </el-table-column>
                    <el-table-column label="冲正时间">
                        <template slot-scope="scope">{{scope.row.REVDATE | filterDateMMDD}}</template>
                    </el-table-column>
                    <el-table-column label="授权状态">
                        <template
                            slot-scope="scope"
                        >{{scope.row.AUTHSTS | filterAuthsts(ComAuthsts)}}</template>
                    </el-table-column>
                    <el-table-column label="授权匹配时间">
                        <template
                            slot-scope="scope"
                        >{{scope.row.MATCHDATE | isDataShow1(scope.row.MATCHTIME)}}</template>
                    </el-table-column>
                    <!-- <el-table-column  label="交易来源"> <template slot-scope="scope">{{scope.row.TRANSSRC}} </template> </el-table-column> -->
                </el-table>
                <div class="btnBox">
                    <el-button
                        :disabled="currentPageIndex1 <=0"
                        type="primary"
                        @click="handleChangePage('pre')"
                    >上一页</el-button>
                    <el-button
                        :disabled="!nextButtonFlag"
                        type="primary"
                        @click="handleChangePage('next')"
                    >下一页</el-button>
                    <!-- <el-button  :disabled="currentPageIndex <=0" type="primary"  @click="handleChildUp">上一页</el-button>
                    <el-button :disabled="currentPageIndex >0" type="primary"  @click="handleChildDown">下一页</el-button>-->
                    <!-- <el-button type="primary" @click="handleDispute">争议账款工单</el-button> -->
                </div>
            </div>
            <!-- 话术 -->
            <div class="hstable_wrap" v-if="speechList.length!=0">
                <el-table
                    :data="speechList"
                    border
                    stripe
                    header-row-class-name="headerRow"
                    ref="showListTable"
                    class="heard-bg business_table hstable"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                    <el-table-column label="业务话术">
                        <template slot-scope="scope">{{scope.row.content}}</template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import { closePage, getDictMappingValue, myMoment, getDictSelectList } from '@/utils/Common';
import { OPTION_CURRENCY_DATA } from '@/utils/Contants';

import CardAuthorizationTransactionItem from './childItem/CardAuthorizationTransactionItem.vue';

export default {
    name: 'CardAuthorizationTransaction',
    data() {
        return {
            formDatas: {

                BEGDATE: moment(new Date()).subtract(6, 'months').format('YYYYMMDD'), // 起始日期
                ENDDATE: moment(new Date()).format('YYYYMMDD'), // 结束日期 6个月 内的
                //BEGDATE: '', // 起始日期
                //ENDDATE: '',
                CARDNBR: '', // 卡号选择
                OPTION: 'A', // 币种选项
                AUTHCODE: '', // 授权号
                INQFLG: '1',
                accttype: '',
            },
            rules: { // form表单验证
                CARDNBR: [{ required: true, message: '请输入卡号！' }],
                OPTION: [{ required: true, message: '请选择外币' }],
                BEGDATE: [
                    { required: true, message: '请选择起始日期', trigger: 'blur' },
                ],
                ENDDATE: [
                    { required: true, message: '请选择结束日期', trigger: 'blur' },
                ],
            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.formDatas.ENDDATE) {
                        return time.getTime() > new Date(moment(this.formDatas.ENDDATE).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.formDatas.BEGDATE) {
                        return time.getTime() < new Date(moment(this.formDatas.BEGDATE).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            DicvPBFLAGValue: '', // 个人卡标志
            CardAuthorizationList: [], // 卡片授权交易查询到的list
            // 下拉框数据
            optionCurrencyData: OPTION_CURRENCY_DATA, // 币种
            CardnbrList: [], // 卡列表
            ImpowerList: [], // 授权卡列表
            pagingDataList: [], // 分期付款申请编号(只存每页最后一条记录)
            pagingDataList1: [], // 分期付款申请编号(只存每页最后一条记录)
            ImpowerList1: [], // 授权卡列表
            nextButtonFlag: false, // ‘下一页’  按钮的显示控制阀
            RTNIND_flag: '', // 翻页标记
            AUTHDATE_flag: '', // 翻页控制使用；首次查询上送空；翻页查询时上送 上页 返回的最后一条记录 授权日期；
            PURTIME_flag: '', // 翻页控制使用；首次查询上送空；翻页查询时上送 上页 返回的最后一条记录 授权时间；
            currentPageIndex: 0, // 当前页最后一条记录的的索引
            currentPageIndex1: 0, // 当前页最后一条记录的的索引
            currentData: {}, // 保存当前的数据
            ifquery: false,
            pageLoading: false,
            speechList: [],//话术列表
            selectedList: [],
            MenuId: '',
            ComAuthsts: '', // 授权状态多选
            currencyList: '',
        };
    },
    filters: {
        isDataShow: (value1, value2) => {
            const t1 = value1 ? moment(`${value1}`, 'YYYYMMDD').format('YYYY-MM-DD') : '';
            const t2 = value2 ? myMoment(value2, 'hhmmss').format('HH:mm:ss') : '';
            return `${t1} ${t2}`;
        },
        isDataShow1: (value1, value2) => {
            if (value1 != '0' && value2 != '0') {
                value2 = value2 + '00';
                const t1 = value1 ? moment(`${value1}`, 'YYYYMMDD').format('YYYY-MM-DD') : '';
                const t2 = value2 ? myMoment(`${value2}`, 'HHMMSS').format('HH:mm:ss') : '';
                return `${t1} ${t2}`;
            }

        },
        filterAuthsts: (value, ComAuthsts) => {
            value = (`${value}`).trim();
            for (let index = 0; index < ComAuthsts.length; index++) {
                const element = ComAuthsts[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        filterTimeDate: (value) => {
            if (value) {
                value = moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
                return value;
            }
            return '';
        },
        filterDateMMDD: (value) => {
            if (value) {
                return moment(value, 'MMDD').format('MM-DD');
            }
            return '';
        },
        filterCURR: (value, currencyList) => {
            value = (`${value}`).trim();
            for (let index = 0; index < currencyList.length; index++) {
                const element = currencyList[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        formatAmt: (value) => {

            if (value) {
                return parseFloat(value).toFixed(2);
            }
            return '';
        },
    },
    computed: {
        ...mapGetters([
            'defaultParams',
            'cardList_3601',
            'cardInfo_3004',
            'AccountionTYPE_INFO',
            'isCurrentMenuInfo',
        ]),
        isShowTableView() {
            return this.ImpowerList.length > 0;
        },
    },
    components: {
        CardAuthorizationTransactionItem,
    },

    async mounted() {
        this.MenuId = this.$route.params.id || '';
        // this.foreachCardList();
        // this.formDatas.CARDNBR = (`${this.cardInfo_3004.CARDNO}`).trim();
        this.getDivtValue();
        this.init();
        this.changeCardList(this.cardInfo_3004.CATEGORY + '');
        await this.getspeechList();
        this.ComAuthsts = await getDictSelectList('AUTHSTS', this);
        this.currencyList = await getDictSelectList('CURRENCY', this);
    },
    methods: {
        init() {
            console.log("默认账户类别：" + this.cardInfo_3004.CATEGORY);
            console.log("默认账户：" + this.cardInfo_3004.CARDNO);
            this.formDatas.accttype = this.cardInfo_3004.CATEGORY + '';
            //this.searchForm.cardno = this.cardInfo_3004.CARDNO;
        },
        changeCardList(val) {
            console.log("当前账户类型：" + val);
            let hasDefault = false; //是否包含默认卡
            this.CardnbrList = [];
            this.cardList_3601.forEach((item) => {
                if (item.CATEGORY + '' === val) {
                    this.CardnbrList.push(item);
                    if (item.CARDNBR === this.cardInfo_3004.CARDNO) {
                        hasDefault = true;
                    }
                }
            });

            //包含默认卡，卡号显示默认卡，不包含，显示cardList里第一张卡号
            if (hasDefault) {
                this.formDatas.CARDNBR = this.cardInfo_3004.CARDNO;
            } else {
                this.formDatas.CARDNBR = this.CardnbrList[0].CARDNBR;
            }
        },
        async getDivtValue() {
            this.DicvPBFLAGValue = await getDictMappingValue('PBFLAG', this.cardInfo_3004.PBFLAG, this);
        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            console.log("this.MenuId", this.MenuId);
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        async getCardAuthirization1(type) {
            this.ImpowerList1 = [];
            console.log("计算当前页码：", Math.floor(7 / 4));

            if (type === 'first') {
                this.currentPageIndex = 0;
                this.currentPageIndex1 = 0;
                this.pagingDataList = [];
            }

            for (let i = 0; i < 4; i++) {


                if (this.RTNIND_flag === '' || this.RTNIND_flag === '1') {
                    await this.get3025(i);
                    this.ImpowerList1 = [...this.ImpowerList1, ...this.ImpowerList];
                    this.currentPageIndex1 = Math.floor(this.currentPageIndex / 4);
                    console.log(" this.pagingDataList1", this.pagingDataList);
                    console.log(" this.ImpowerList11", this.ImpowerList1);
                    console.log("this.currentPageIndex1:" + this.currentPageIndex + "|this.currentPageIndex11:" + this.currentPageIndex1);
                } else {
                    return false;
                }
            }
            console.log("下一页标志：" + this.nextButtonFlag + ",翻页标志：" + this.RTNIND_flag);

            // 先通过返回来的 翻页标志 RTN-IND的值判断   0：查询完毕；1：需继续翻页查询；


        },

        async get3025(i) {
            console.log("查询第：" + i + "次");
            let AUTHDATE = '';
            let AUTHTIME = '';

            if (this.pagingDataList.length) { // 判断翻页上传字段取值
                AUTHDATE = this.pagingDataList[this.currentPageIndex].AUTHDATE || '';
                AUTHTIME = this.pagingDataList[this.currentPageIndex].AUTHTIME || '';
            }


            const { defaultParams } = this.$store.getters;
            defaultParams.body.appHead.tranCode = '3025'; // 修改交易号
            defaultParams.body.appBody = {
                CARDNBR: this.formDatas.CARDNBR, // 卡号
                CARDNO: this.formDatas.CARDNBR, // 卡号
                OPTION: this.formDatas.OPTION, // 币种选项
                BEGDATE: this.formDatas.BEGDATE, // 起始日期
                ENDDATE: this.formDatas.ENDDATE, // 结束日期
                AUTHCODE: this.formDatas.AUTHCODE, // 授权号
                RESPCD: this.formDatas.AUTHCODE ? '00' : '', // 授权结果
                PINFLAG: '0', // 是否检查密码标志
                RTNIND: this.pagingDataList.length === 0 ? '' : '1', // 翻页标志 首次查询上送空；下翻页查询上送1；
                INQFLG: this.formDatas.AUTHCODE ? '1' : '0', // 查询方式选项 默认为零
                AUTHDATE: AUTHDATE,// 翻页控制使用；首次查询上送空；翻页查询时上送上页返回的最后一条记录授权日期；
                PURTIME: AUTHTIME, // 翻页控制使用；首次查询上送空；翻页查询时上送上页返回的最后一条记录授权时间；
            };
            await this.$post.common.transPort(defaultParams).then((res) => {
                this.nextButtonFlag = false;
                if (res.status === 200) { // 请求成功

                    const cardData = JSON.parse(res.data.jsonRes);
                    // console.log(' 3025卡片授权交易查询');
                    // console.log(cardData);
                    if (cardData.sysHead.rspCd == '000000') { // 交易成功
                        this.ImpowerList = cardData.body.appBody.dataList || [];
                        this.RTNIND_flag = cardData.body.appBody.RTNIND;
                        const newObj = cardData.body.appBody.dataList[cardData.body.appBody.dataList.length - 1];
                        // 判断当前的最后一条记录授权日期；是否与记录的相等 如果相等就不会翻页
                        // this.AUTHTIME_flag==newObj.AUTHTIME?this.nextButtonFlag=false:this.AUTHTIME_flag=newObj.AUTHTIME; //授权时间
                        // this.AUTHDATE_flag==newObj.AUTHDATE?'':this.AUTHDATE_flag=newObj.AUTHDATE;
                        this.currentData = {
                            AUTHDATE: newObj.AUTHDATE, // AUTH-DATE
                            AUTHTIME: newObj.AUTHTIME, // AUTHTIME
                        };

                        this.nextButtonFlag = !(cardData.body.appBody.RTNIND === '0'); // 返回记录小于5，不能下一页
                        let flag = false;
                        let currentIndex;
                        this.pagingDataList.forEach((item, index) => { // 判断此次查询数据最后一条记翻页分期付款序号是否在已有列表中
                            if (item.AUTHDATE === this.currentData.AUTHDATE && item.AUTHTIME === this.currentData.AUTHTIME) {
                                flag = true;
                                currentIndex = index;
                            }
                        });
                        if (flag) { // 存在
                            this.currentPageIndex = currentIndex;
                        } else {
                            this.pagingDataList.push(this.currentData);
                            this.currentPageIndex = this.pagingDataList.length - 1;
                        }
                    }
                    //  else {
                    //     const errorMsg = `( 错误代码：${cardData.sysHead.rspCd}, 错误信息：${cardData.sysHead.rspMsg} )`;
                    //     this.$alert(errorMsg, '提示', {
                    //         customClass: 'error', type: 'error',
                    //     });
                    //     this.data = [];
                    // }
                }
                // else {
                //     this.$alert('请求失败！', '提示', {
                //         customClass: 'error', type: 'error',
                //     });
                // }
            });
        },
        // 调用3025，查询卡片授权交易明细
        getCardAuthirization(type) {
            let AUTHDATE = '';
            let AUTHTIME = '';
            if (type != 'first') {

                if (this.pagingDataList.length) { // 判断翻页上传字段取值
                    AUTHDATE = this.pagingDataList[this.currentPageIndex].AUTHDATE || '';
                    AUTHTIME = this.pagingDataList[this.currentPageIndex].AUTHTIME || '';
                }
            } else {
                this.currentPageIndex = 0;
                this.pagingDataList = [];
            }
            const { defaultParams } = this.$store.getters;
            defaultParams.body.appHead.tranCode = '3025'; // 修改交易号
            defaultParams.body.appBody = {
                CARDNBR: this.formDatas.CARDNBR, // 卡号
                CARDNO: this.formDatas.CARDNBR, // 卡号
                OPTION: this.formDatas.OPTION, // 币种选项
                BEGDATE: this.formDatas.BEGDATE, // 起始日期
                ENDDATE: this.formDatas.ENDDATE, // 结束日期
                AUTHCODE: this.formDatas.AUTHCODE, // 授权号
                RESPCD: this.formDatas.AUTHCODE ? '00' : '', // 授权结果
                PINFLAG: '0', // 是否检查密码标志
                RTNIND: this.pagingDataList.length === 0 ? '' : '1', // 翻页标志 首次查询上送空；下翻页查询上送1；
                INQFLG: this.formDatas.AUTHCODE ? '1' : '0', // 查询方式选项 默认为零
                AUTHDATE: AUTHDATE,// 翻页控制使用；首次查询上送空；翻页查询时上送上页返回的最后一条记录授权日期；
                PURTIME: AUTHTIME, // 翻页控制使用；首次查询上送空；翻页查询时上送上页返回的最后一条记录授权时间；
            };


            this.$post.common.transPort(defaultParams).then((res) => {
                this.nextButtonFlag = false;
                if (res.status === 200) { // 请求成功
                    const cardData = JSON.parse(res.data.jsonRes);
                    // console.log(' 3025卡片授权交易查询');
                    // console.log(cardData);
                    if (cardData.sysHead.rspCd == '000000') { // 交易成功
                        this.ImpowerList = cardData.body.appBody.dataList || [];

                        // 先通过返回来的 翻页标志 RTN-IND的值判断   0：查询完毕；1：需继续翻页查询；

                        this.RTNIND_flag = cardData.body.appBody.RTNIND;
                        const newObj = cardData.body.appBody.dataList[cardData.body.appBody.dataList.length - 1];
                        // 判断当前的最后一条记录授权日期；是否与记录的相等 如果相等就不会翻页
                        // this.AUTHTIME_flag==newObj.AUTHTIME?this.nextButtonFlag=false:this.AUTHTIME_flag=newObj.AUTHTIME; //授权时间
                        // this.AUTHDATE_flag==newObj.AUTHDATE?'':this.AUTHDATE_flag=newObj.AUTHDATE;
                        this.currentData = {
                            AUTHDATE: newObj.AUTHDATE, // AUTH-DATE
                            AUTHTIME: newObj.AUTHTIME, // AUTHTIME
                        };

                        this.nextButtonFlag = !(cardData.body.appBody.RTNIND === '0'); // 返回记录小于5，不能下一页

                        let flag = false;
                        let currentIndex;

                        this.pagingDataList.forEach((item, index) => { // 判断此次查询数据最后一条记翻页分期付款序号是否在已有列表中
                            if (item.AUTHDATE === this.currentData.AUTHDATE && item.AUTHTIME === this.currentData.AUTHTIME) {
                                flag = true;
                                currentIndex = index;
                            }
                        });
                        if (flag) { // 存在
                            this.currentPageIndex = currentIndex;
                        } else {
                            this.pagingDataList.push(this.currentData);
                            this.currentPageIndex = this.pagingDataList.length - 1;
                        }
                    } else {
                        const errorMsg = `( 错误代码：${cardData.sysHead.rspCd}, 错误信息：${cardData.sysHead.rspMsg} )`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                        this.data = [];
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },

        // 给银行卡赋值
        foreachCardList() {
            //  console.log(this.cardList_3601, 'this.cardList_3601');
            for (let i = 0; i < this.cardList_3601.length; i++) {
                // cardnumList.push(this.cardList_3601[i].CARDNBR)
                this.CardnbrList[i] = {};
                this.CardnbrList[i].id = this.CardnbrList[i].label = this.cardList_3601[i].CARDNBR;
            }
            // return CardnbrList;
        },
        // 争议账款工单
        DisputeWorkorder(obj) {
            // 跳转到指定页面
            this.$router.push({ path: '/', query: { workorder: obj } });
        },
        // 返回 清空数据
        handleResetFun() {
            this.ImpowerList = [];
            this.pagingDataList = [];
            this.RTNIND_flag = '';
        },
        // 每次授权号改变 都清除数据
        handleAuthcode() {
            this.ImpowerList = [];
            this.pagingDataList = [];
            this.RTNIND_flag = '';
        },
        // 点击关闭 处理事件
        handleClose() {
            closePage(this.$route, this, 1);
        },
        handleReset() {
            //this.formDatas.OPTION = '';
            this.formDatas.AUTHCODE = '';
            this.formDatas.BEGDATE = moment(new Date()).subtract(6, 'months').format('YYYYMMDD');
            this.formDatas.ENDDATE = moment(new Date()).format('YYYYMMDD');
            this.ImpowerList = [];
            this.ImpowerList1 = [];
            this.pagingDataList = [];
            this.RTNIND_flag = '';
            this.currentPageIndex = 0;
            this.currentPageIndex1 = 0;
            this.nextButtonFlag = false;
        },
        // 确定按钮 发送请求
        onSubmit(data) {
            this.pageLoading = true;
            this.ifquery = true;
            this.$refs.formData.validate(async (valid) => {
                if (valid) {
                    this.handleAuthcode();
                    await this.getCardAuthirization1('first');
                    this.pageLoading = false;
                } else {
                    this.pageLoading = false;
                    return false;
                }
            });
        },

        // 上下页切换
        async handleChangePage(type) {
            this.pageLoading = true;
            //alert(this.currentPageIndex);
            if (type === 'pre') { // 切换到上一页

                if (this.currentPageIndex - 8 < 0) {
                    this.RTNIND_flag = '';
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.RTNIND_flag = '1';
                    this.currentPageIndex = (this.currentPageIndex1 - 1) * 4 - 1;
                }
                console.log("翻页标志1：" + this.RTNIND_flag + ",查询起始记录索引1：" + this.currentPageIndex + ",当前页：" + this.currentPageIndex1);
                await this.getCardAuthirization1();
                this.pageLoading = false;
            } else { // 切换到下一页
                this.RTNIND_flag = '1';
                console.log("翻页标志2：" + this.RTNIND_flag + ",查询起始记录索引2：" + this.currentPageIndex + ",当前页：" + this.currentPageIndex1);
                await this.getCardAuthirization1();
                this.pageLoading = false;
            }
        },
    },
};
</script>

<style lang='scss' >
.cardAuthorizationTransaction {
    width: 98%;
    background: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: center;
        span {
            font-size: 14px;
        }
        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    .marginleft {
        margin-left: -80px;
    }
    .el-card__header {
        padding: 8px !important;
    }
    //主体内容
    .cardAuthorizationTransactionMain {
        width: 100%;
        .el-row {
            .el-col {
                text-align: left;
                color: #999;
                display: flex;
                line-height: 34px;
                span {
                    display: inline-block;
                }
                .queryMainLeft {
                    width: 30%;
                    text-align: right;
                    margin-right: 7px;
                    color: #333;
                }
                /* .el-input {
                    width: 225px !important;
                    input {
                        height: 35px;
                    }
                } */
                .el-select {
                    width: auto;
                }
                .inputBox {
                    /* .el-input__inner {
                        height: 32px;
                        line-height: 32px;
                    } */
                }
                .el-radio {
                    margin-left: 25px;
                }
            }
        }
    }
    .btn_Box {
        width: 200px;
        text-align: center;
        //float: right;
    }
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
